<!DOCTYPE html>
<html lang="{{.Locale}}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="refresh" content="3600">
    <title>{{.TemplateTitle}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{asset .Domain "/fonts/fonts.css"}}">
    {{.CozyUI}}
    {{.ThemeCSS}}
    {{.Favicon}}
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <symbol viewBox="0 0 1792 1792" id="fa-check">
          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/>
        </symbol>
        <symbol id="hide" viewBox="0 0 16 16">
          <defs>
            <path d="M8,12.038 C5.791,12.038 4,10.247 4,8.03800005 C4,7.45100005 4.134,6.89700005 4.361,6.39500005 L6,8.03400005 L6,8.03800005 C6,9.14200005 6.896,10.038 8,10.038 C8.001,10.038 8.003,10.038 8.004,10.038 L9.644,11.677 C9.141,11.904 8.587,12.038 8,12.038 Z M1.115,1.20000005 L13.842,13.905 L12.856,14.891 L11.296,13.329 C10.362,13.757 9.276,14.038 8,14.038 C2,14.038 0,8.03800005 0,8.03800005 C0,8.03800005 0.662,6.06900005 2.353,4.38600005 L0.141,2.17500005 L1.115,1.20000005 Z M6.3105,4.42470005 L4.6515,2.76570005 C5.5945,2.32370005 6.7005,2.03770005 7.9995,2.03770005 C13.9995,2.03770005 15.9995,8.03770005 15.9995,8.03770005 C15.9995,8.03770005 15.3285,10.0347 13.6105,11.7247 L11.6135,9.72770005 C11.8545,9.21270005 11.9995,8.64470005 11.9995,8.03770005 C11.9995,5.82870005 10.2085,4.03770005 7.9995,4.03770005 C7.3935,4.03770005 6.8255,4.18270005 6.3105,4.42470005 Z M8,6.03800005 C9.104,6.03800005 10,6.93400005 10,8.03800005 C10,8.06200005 9.994,8.08400005 9.993,8.10700005 L7.931,6.04500005 C7.954,6.04400005 7.977,6.03800005 8,6.03800005 Z" id="path-1"></path>
          </defs>
          <g id="icons/16/icon-hide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <mask id="mask-2" fill="white">
              <use xlink:href="#path-1"></use>
            </mask>
            <use id="Fill-1" fill="currentColor" xlink:href="#path-1"></use>
          </g>
        </symbol>
        <symbol id="display" viewBox="0 0 16 16">
          <defs>
            <path d="M8,2 C11.637,2 14.742,4.488 16,8 C14.742,11.512 11.637,14 8,14 C4.363,14 1.258,11.512 0,8 C1.258,4.488 4.363,2 8,2 Z M8,12 C10.209,12 12,10.209 12,8 C12,5.791 10.209,4 8,4 C5.791,4 4,5.791 4,8 C4,10.209 5.791,12 8,12 Z M8,6 C9.104,6 10,6.896 10,8 C10,9.104 9.104,10 8,10 C6.896,10 6,9.104 6,8 C6,6.896 6.896,6 8,6 Z" id="path-2"></path>
          </defs>
          <g id="icons/16/icon-display" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <mask id="mask-3" fill="white">
              <use xlink:href="#path-2"></use>
            </mask>
            <use id="Fill-2" fill="currentColor" xlink:href="#path-2"></use>
          </g>
        </symbol>
      </defs>
    </svg>
    <div role="application">
      <main class="wizard">
        <form id="login-form" method="POST" action="/auth/twofactor" class="wizard-wrapper">
          <div role="region" class="wizard-main" id="login-field">
            {{if .CredentialsError}}
            <p class="wizard-errors u-error">
              {{.CredentialsError}}
            </p>
            {{end}}
            <div class="c-avatar u-mh-auto u-mv-0-m u-mv-1">
              <img class="c-avatar-image" src="/public/avatar" alt="" />
            </div>
            <h1 class="wizard-title two-factor-form">{{t "Login Two factor title"}}</h1>
            <h2 class="password-form wizard-subtitle u-coolGrey">{{.Domain}}</h2>
            <p class="two-factor-form wizard-header-help" id="login-two-factor-passcode-tip">{{t "Login Two factor help"}}</p>
            <input id="redirect" type="hidden" name="redirect" value="{{.Redirect}}" />
            <input id="two-factor-token" type="hidden" name="two-factor-token" value="{{.TwoFactorToken}}" />
            <div class="o-field u-m-0 two-factor-form">
              <label for="two-factor-passcode" class="c-label" aria-describedby="login-two-factor-passcode-tip">{{t "Login Two factor field"}}</label>
              <input id="two-factor-passcode" class="wizard-input c-input-text" name="two-factor-passcode" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="6" {{if .TwoFactorForm}}autofocus {{end}}autocomplete="current-password" />
            </div>
            {{if .TrustedDeviceCheckBox}}
              <p class="wizard-notice two-factor-form">
                <label class="c-input-checkbox u-m-0">
                  <input id="two-factor-trust-device" name="two-factor-trust-device" type="checkbox" />
                  <span>{{t "Login Two factor device trust field"}}</span>
                </label>
              </p>
            {{else}}
              <input id="two-factor-trust-device" class="two-factor-trust-device-checkbox" name="two-factor-trust-device" type="hidden"/>
            {{end}}
            <input id="long-run-session" name="long-run-session" type="hidden" value="{{.LongRunSession}}" />
          </div>
          <footer class="wizard-footer u-pb-half-m u-pb-2">
            <button id="login-submit" class="c-btn c-btn--full wizard-button" form="login-form" type="submit">
              <span class="two-factor-form">{{t "Login Confirm"}}</span>
            </button>
          </footer>
        </form>
      </main>
    </div>
    <script src="{{asset .Domain "/scripts/twofactor.js"}}"></script>
    <script src="{{asset .Domain "/scripts/responsive.js"}}"></script>
  </body>
</html>
